<!DOCTYPE html>
<html>
<head>
	<title>聊天室</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="public/expands/layui/css/layui.css">
	<link rel="stylesheet" type="text/css" href="public/css/chat.css">
</head>
<body>
	<div class="layui-container">
	  	<div class="layui-row">
		    <div class="layui-col-xs12 layui-col-sm12 layui-col-md12">
		      	<div class="he_xin_code">
		      		<!-- 操作列 -->
		      		<div class="layui-col-xs1 layui-col-sm1 layui-col-md1 action_col">
		      			<!-- 当前用户头像 -->
		      			<div class="self_headpic">
		      				<div class="self_headpic_child_div">
		      					<img class="layui-circle" src="public/images/headpic/self.jpg">
		      				</div>
		      			</div>
		      			<!-- 通讯列表图标 -->
		      			<div class="mailing_list_icon">
		      				<div class="mailing_list_icon_child_div">
		      					<a><i class="layui-icon layui-icon-user"></i></a>
		      				</div>
		      			</div>
		      		</div>
		      		<!-- 聊天人员记录列表 -->
		      		<div class="layui-col-xs3 layui-col-sm3 layui-col-md3 chat_list">
		      			<div class="layui-card chat_list_child_div">
						  	<div class="layui-card-header user_div" style="display: block;">
						  		<div class="layui-col-md3">
						  			<div class="user_headpic">
						  				<img src="public/images/headpic/self.jpg">
						  			</div>
						  		</div>
						  		<div class="layui-col-md7">
						  			<div class="user_nickname">长治拼车群</div>
						  		</div>
						  		<div class="layui-col-md2">
						  			<div class="last_news_time" style="">21/3/15</div>
						  		</div>
						  	</div>
						</div>
		      		</div>
		      		<!-- 消息记录及聊天输入框 -->
		      		<div class="layui-col-xs8 layui-col-sm8 layui-col-md8 message_log_code">
		      			<!-- 顶部标题 -->
		      			<div class="layui-row now_chat_user">
		      				<div class="now_chat_user_info">
		      					<span class="now_chat_user_nickname">汽车俱乐部</span>
		      					<span class="now_chat_user_icon">
		      						<a onclick="chat_setting(this)"><i class="layui-icon layui-icon-more"></i></a>
		      					</span>
		      				</div>
		      			</div>
		      			<!-- 聊天记录 -->
		      			<div class="layui-row message_log">
		      				<div class="message_log_child_div">
	      						<div class="layui-card message" style="display: none;">
								  	<div class="layui-card-header send_time">11:30</div>
								  	<div class="layui-card-header layui-inline other_user_headpic">
								  		<div class="user_headpic_div">
								  			<img src="public/images/headpic/self.jpg">
								  		</div>
								  	</div>
								  	<div class="layui-card-body layui-inline other_user_content" style="">
								    	卡片式面板面板通常用于非白色背景色的主体内<br>
								    	从而映衬出边框投影
								  	</div>
								</div>


								<div class="layui-card message" style="display: none;">
								  	<div class="layui-card-header send_time">11:30</div>
								  	<div class="self_headpic_and_content">
								  		<div class="layui-inline del_message">
									  		<a class="layui-icon layui-icon-delete"></a>
									  	</div>
								  		<div class="layui-card-body layui-inline self_user_content" style="">
									    	卡片式面板面板通常用于非白色背景色的主体内<br>
									    	从而映衬出边框投影
									  	</div>
									  	<div class="layui-card-header layui-inline self_user_headpic">
									  		<div class="user_headpic_div">
									  			<img src="public/images/headpic/self.jpg">
									  		</div>
									  	</div>
								  	</div>
								</div>
								
		      				</div>
		      			</div>
		      			<!-- 内容输入区域 -->
		      			<div class="layui-row">
		      				<div class="content_input">
		      					<textarea id="demo" style="display: none;"></textarea>
		      					<div class="send_btn">
		      						<button type="button" class="layui-btn" id="send_btn_sub">发送</button>
		      					</div>
		      				</div>
		      			</div>
		      		</div>
		      		<!-- 聊天房间功能模块设置以及群成员列表 -->
		      		<div class="chat_room_setting">
		      			<ul class="layui-nav layui-nav-tree layui-nav-side">
		      				<table class="layui-table">
		      				  	<tbody>
								    <tr>
								      	<td>1</td>
								      	<td>2</td>
								      	<td>3</td>
								      	<td>4</td>
								    </tr>
								</tbody>
		      				</table>
		      			</ul>
		      		</div>
		      	</div>
		    </div>
	  	</div>
	</div>
</body>
<style type="text/css">
	.layui-layer-msg {
		border-radius: 10px;
		background-color: #1E9FFF;
	}
	.chat_room_setting {
		display: flex;
		float: right;
		display: none;
	}
	.chat_room_setting .layui-nav-side {
		margin-top: 50px;
    	height: 700px;
    	left: unset;
    	background-color: #f2f2f2;
    	border: 1px solid #d2d2d2;
	}
	.chat_room_setting .layui-table {
		margin: 0;
	}
	.chat_room_setting .layui-table tr {
		text-align: center;
    	height: 70px;
	}
</style>
</html>
<script type="text/javascript" src="public/expands/layui/layui.all.js"></script>
<!-- <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script> -->
<script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<script type="text/javascript" src="public/js/chat.js"></script>